{% extends 'baykeshop/base_site.html' %}

{% load static bayketags %}

{% block title %}
    支付成功
{% endblock %}

{% block breadcrumb %}
<div class="container">
	<nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
		<ul>
			<li><a href="{% url 'baykeshop:home' %}">首页</a></li>
			<li class="is-active"><a href="#" aria-current="page">支付成功</a></li>
		</ul>
	</nav>
</div>
{% endblock %}

{% block container %}
<div class="box is-radiusless is-marginless pl-6 pr-6" style="line-height: 30px;">
    <div class="is-flex is-flex-direction-column is-align-items-center mb-4">
        <figure class="image is-128x128">
        <img src="{% static 'baykeshop/img/payok.svg' %}">
        </figure>
        <h1 class=" is-size-3 ">支付成功</h1> 
    </div>
    <div class=" dropdown-divider"></div>
    <p>订单编号：{{ order_sn }}</p> 
    <p>实际支付：{{ total_amount }}元</p>
    <p>收货信息：{{ address }}</p>
    <p>支付状态：{{ pay_status|paystatus }}</p>
    <p>支付方式：{{ pay_method|paymethod }}</p>
    <p>支付时间：{{ pay_time }}</p>
    <div class=" dropdown-divider"></div>
    {% for sku in baykeordersku_set %}
    <div class="columns">
        <div class="column is-2 is-flex is-justify-content-center">
            <figure class="image is-128x128">
                <img src="{{ sku.skus.pic }}" alt="{{ sku.title }}">
            </figure>
        </div>
        <div class="column is-flex is-flex-direction-column is-justify-content-center">
            <h1 class=" has-text-weight-bold">{{ sku.title }}</h1>
            <div class="has-text-grey-light">
                {% for op in sku.options %}
                <span class="mr-3">{{ op.spec__name }}:{{ op.name }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
            {{ sku.price }}x{{ sku.count }}
        </div>
    </div>
    {% endfor %}
</div>

<div class="box is-radiusless">
    <div class=" buttons is-justify-content-center">
    <a class=" button is-success" href="{% url 'baykeshop:menmber-orders-retrieve' id %}">查看订单</a>
    <a class=" button is-black" href="{% url 'baykeshop:home' %}">返回首页</a>
    </div>
</div>
{% endblock %}